<template>
  <BasicModal v-bind="$attrs" @register="registerModel" @ok="handleSubmit" title="编辑基本信息">
    <div class="pt-3px pr-3px">
      <BasicForm @register="registerForm" />
    </div>
  </BasicModal>
</template>
<script lang="ts">
  import { defineComponent } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { BasicForm, useForm } from '/@/components/Form/index';
  import { formConfig } from './data';
  import { updateUser } from '/@/api/sys/storeData';
  export default defineComponent({
    components: { BasicModal, BasicForm },
    props: {
      formData: { type: Object },
    },
    emits: ['register', 'success'],
    setup(_, { emit }) {
      const [registerForm, { setFieldsValue, resetFields, validate }] = useForm(formConfig);
      const [registerModel, { setModalProps, closeModal }] = useModalInner((data) => {
        resetFields();
        data && onDataReceive(data);
      });

      function onDataReceive(data) {
        setModalProps({ confirmLoading: false });
        setFieldsValue({
          ...data.formState,
        });
      }
      async function handleSubmit() {
        try {
          const values = await validate();
          setModalProps({ confirmLoading: true });
          await updateUser(values);
          closeModal();
          emit('success');
        } finally {
          setModalProps({ confirmLoading: false });
        }
      }
      return { registerModel, registerForm, handleSubmit };
    },
  });
</script>
